bootstrap datetimepicker的时间变成1899年

bootstrap datetimepicker 重新加载后,日期会变1899年,
这个问题要怎么解决呢??




先看个小例子:




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DateTimePickQuestion1.WebForm1" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


    <!-- import datetimepicker js and css -->
    <script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>
    <script src="js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />


    <!-- my script -->
    <script type="text/javascript">


        $(function () {






            $("#mySelect").change(function () {


                $(".form_datetime").datetimepicker('remove');


                var type = $("#mySelect").val();


                switch (type) {
                    case "month":
                        $('.form_datetime').datetimepicker({
                            autoclose: true,
                            startView: 'year',
                            minView: 'year',
                            format: 'yyyy-mm'
                        });
                        break;
                    case "year":
                        $('.form_datetime').datetimepicker({
                            autoclose: true,
                            startView: 'decade',
                            minView: 'decade',
                            format: 'yyyy'
                        });
                        break;


                } //end switch


            })//end change


        })//end ready


        
    
    </script>


</head>
<body>
    <div>
        <select id='mySelect'>
            <option value='year'>year</option>
            <option value='month'>month</option>
        </select>


        <div class="input-group date form_datetime col-md-2"  data-date='2014-1-1'>
            <input class="form-control" type="text" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
            </span>
        </div>


    </div>
</body>
</html>


上面的小例子就是用 select 标签重新加载不同的datetimepicker
问题就出现在 datetimepicker remove之后,他的时间就变成了 1899年
如图:




要怎么解决这个问题呢?
这里给出一个小小的办法:
就是在你remove datetimepicker之后
使用一下datetimepicker 的 update方法
代码如下:




$("#mySelect").change(function () {


                $(".form_datetime").datetimepicker('remove');


                var type = $("#mySelect").val();


                switch (type) {
                    case "month":
                        $('.form_datetime').datetimepicker({
                            autoclose: true,
                            startView: 'year',
                            minView: 'year',
                            format: 'yyyy-mm'
                        });


                        $('.form_datetime').datetimepicker('update', new Date());
                        break;


                    case "year":
                        $('.form_datetime').datetimepicker({
                            autoclose: true,
                            startView: 'decade',
                            minView: 'decade',
                            format: 'yyyy'
                        });


                        $('.form_datetime').datetimepicker('update', new Date());
                        break;


                } //end switch


            })//end change


用了update -->new Date() 之后就可以回到今天了!!!




另外想提醒的是:
datetimepicker的startDate属性指的是:
The earliest date that may be selected; all earlier dates will be disabled.

最小的选择时间,比这个最小选择时间小的日期无法选择


最后想说的是 bootstrap datetimepicker 的网站是https://github.com/smalot/bootstrap-datetimepicker

里面有很多说明的,自己看把

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值